応答性の高いチャート

ウィンドウ サイズに基づいてチャート サイズを変更する場合、大きな制限はキャンバスのサイズに基づいて変更されることです。与えるサイズ (canvas.width.height) できるいいえとは逆に、相対的な値で表現されます。画面サイズ (canvas.style.width.height)。さらに、これらのサイズは互いに独立しているため、キャンバス与えるサイズは自動的に調整されません画面サイズが大きくなり、レンダリングが不正確になります。

以下の例動作しない:

  • <canvas height="40vh" width="80vw">:無効値を指定しても、キャンバスのサイズは変更されません (例)
  • <canvas style="height:40vh; width:80vw">:無効動作すると、キャンバスのサイズは変更されますが、ぼやけてしまいます (例)

Chart.js は、いくつかのオプション応答性を有効にし、キャンバスが変更されたことを検出してチャートのサイズ変更動作を制御します。画面サイズの変更と更新与えるそれに応じてサイズを調整します。

構成オプション

名前 タイプ デフォルト 説明
responsive boolean true コンテナーが変更するときにチャート キャンバスのサイズを変更します (重要な注意点...)。
responsiveAnimationDuration number 0 サイズ変更イベント後、新しいサイズにアニメーションするまでにかかる時間 (ミリ秒)。
maintainAspectRatio boolean true 元のキャンバスの縦横比を維持する(width / height)サイズ変更するとき。
aspectRatio number 2 キャンバスのアスペクト比 (つまり、width / height、値 1 は正方形のキャンバスを表します)。高さが属性またはスタイルによって明示的に定義されている場合、このオプションは無視されることに注意してください。
onResize function null サイズ変更が発生したときに呼び出されます。渡された 2 つの引数、チャート インスタンスと新しいサイズを取得します。

重要な注意点

キャンバス サイズの変更を検出することは、canvasエレメント。 Chart.js は親コンテナを使用してキャンバスを更新します与える画面サイズ。ただし、この方法ではコンテナが相対的に位置するチャートキャンバス専用。コンテナー サイズの相対値を設定することで応答性を実現できます (例):

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

コンテナのサイズを変更することで、プログラムでチャートのサイズを変更することもできます。

chart.canvas.parentNode.style.height = '128px';
chart.canvas.parentNode.style.width = '128px';

上記のコードでチャートの高さのサイズを正しく変更するには、maintainAspectRatioオプションも次のように設定する必要がありますfalse

サイズ変更可能なチャートの印刷

CSS メディア クエリを使用すると、ページの印刷時にスタイルを変更できます。これらのメディア クエリから適用される CSS により、グラフのサイズ変更が必要になる場合があります。ただし、サイズ変更は自動的には行われません。印刷時にチャートのサイズ変更をサポートするには、印刷前にイベントを実行し、各チャートのサイズ変更を手動でトリガーします。

function beforePrintHandler () {
    for (var id in Chart.instances) {
        Chart.instances[id].resize();
    }
}

「」と一致する結果

    「」に一致する結果はありません